import {
    DesktopOutlined,
    FileOutlined,
    PieChartOutlined,
    TeamOutlined,
    UserOutlined,
} from '@ant-design/icons';
import type {MenuProps} from 'antd';
import {Menu, theme} from 'antd';
import {useNavigate,useLocation} from "react-router-dom";
import {useState} from 'react'


type MenuItem = Required<MenuProps>['items'][number];

// function getItem(
//     label: React.ReactNode,
//     key: React.Key,
//     icon?: React.ReactNode,
//     children?: MenuItem[],
// ): MenuItem {
//     return {
//         key,
//         icon,
//         children,
//         label,
//     } as MenuItem;
// }
//
// const items: MenuItem[] = [
//     getItem('Option 1', '/index', <PieChartOutlined/>),
//     getItem('Option 2', '/about', <DesktopOutlined/>),
//     getItem('User', 'sub1', <UserOutlined/>, [
//         getItem('Tom', '3'),
//         getItem('Bill', '4'),
//         getItem('Alex', '5'),
//     ]),
//     getItem('Team', 'sub2', <TeamOutlined/>,
//         [getItem('Team 1', '6'), getItem('Team 2', '8')
//         ]),
//     getItem('Files', '9', <FileOutlined/>),
// ];
const items: MenuItem[] = [
    {
        label: '首页',
        key: '/index',
        icon: <PieChartOutlined/>
    },{
        label: '关于',
        key: '/about',
        icon: <DesktopOutlined/>
    },{
        label: '系统管理',
        key: '/xtgl',
        icon: <DesktopOutlined/>,
        children:[
            {
                label: '角色管理',
                key: '/role',
                icon: <PieChartOutlined/>
            }
        ]
    }
]

const App: React.FC = () => {
    // 获取当前路由
    const currentRouter = useLocation()
    // 默认当前激活菜单路由
    let menuActiveRoute:string = ''

    // 刷新浏览器激活当前菜单的展开项子集
    for(let i=0;i<items.length;i++){
        if(items[i].children && items[i].children.length>0){
            items[i].children.find(ite=>{
                if(ite.key==currentRouter.pathname){
                    console.log('子组件')
                    console.log(items[i].key)
                    menuActiveRoute=items[i].key
                }
            })
        }
    }

    //路由点击跳转
    const {
        token: {colorBgContainer, borderRadiusLG},
    } = theme.useToken();
    const navigate = useNavigate();
    const menuClick = (e: { key: string }) => {
        navigate(e.key)
    }
    const [openKeys, setOpenKeys] = useState([menuActiveRoute])

    // 限定展开项为一项
    const onOpenChange = (keys: string[]) => {
        setOpenKeys([keys[keys.length - 1]])
    }

    return (
        <Menu theme="dark"
              defaultSelectedKeys={[currentRouter.pathname]}
              mode="inline"
            // 当前菜单展开项的数组
              openKeys={openKeys}
              items={items}
              onOpenChange={onOpenChange}
              onClick={menuClick}/>
    );
};

export default App;
